import React, { useEffect }from 'react';
import { DataGrid } from '@material-ui/data-grid';
import { queryAiSiteList, setPage, setPageSize } from '../store/aiSiteSlice'
import { useDispatch, useSelector } from 'react-redux';


// https://v4.mui.com/components/tables/
// https://mui.com/x/react-data-grid/layout/
// npm install @material-ui/data-grid

// const columns = [
//     { field: 'id', headerName: 'ID', width: 100 },
//     {
//         field: 'firstName',
//         headerName: 'First name',
//         width: 150,
//         editable: true,
//     },
//     {
//         field: 'lastName',
//         headerName: 'Last name',
//         width: 150,
//         editable: true,
//     },
//     {
//         field: 'age',
//         headerName: 'Age',
//         type: 'number',
//         width: 110,
//         editable: true,
//     },
//     {
//         field: 'fullName',
//         headerName: 'Full name',
//         description: 'This column has a value getter and is not sortable.',
//         sortable: false,
//         width: 160,
//         valueGetter: (params) =>
//             `${params.getValue(params.id, 'firstName') || ''} ${params.getValue(params.id, 'lastName') || ''
//             }`,
//     },
// ]

const columns = [
    { field: 'id', headerName: 'ID', width: 100 },
    {
        field: 'bizId',
        headerName: '业务ID',
        width: 150,
    },
    {
        field: 'name',
        headerName: '站点名称',
        width: 150,
        editable: true,
    },
    {
        field: 'url',
        headerName: '站点地址',
        width: 230,
        editable: true,
    },
    {
        field: 'views',
        headerName: '浏览量',
        width: 120,
    },
    {
        field: 'avatarUrl',
        headerName: '站点Logo',
        width: 150,
        editable: true,
    },
    {
        field: 'description',
        headerName: '描述',
        width: 190,
        editable: true,
    },
    {
        field: 'summarize',
        headerName: '总结',
        width: 190,
        editable: true,
    },
    {
        field: 'indexUpdatedAt',
        headerName: '索引更新时间',
        type: 'number',
        width: 170,
        editable: true,
    },
    {
        field: 'createdAt',
        headerName: '创建时间',
        type: 'number',
        width: 150,
        editable: true,
    },
    {
        field: 'updatedAt',
        headerName: '更新时间',
        type: 'number',
        width: 150,
        editable: true,
    },
]




export default function AiSiteApp() {

    const dispatch = useDispatch()
    const aiSiteList = useSelector(state => state.aiSite.list)
    const page = useSelector(state => state.aiSite.page)
    const pageSize = useSelector(state => state.aiSite.pageSize)
    const total = useSelector(state => state.aiSite.total)


    let update = false


    useEffect(() => {
        console.log('useEffect...run ', page, pageSize)
        dispatch(queryAiSiteList({
            page, pageSize
        }))

        return () => {
        }
    }, [page, pageSize])


    const onPageSizeChange = (pageSize, details) => {
        console.log('onPageSizeChange...', pageSize, details)

      
        dispatch(setPage(0))
        dispatch(setPageSize(pageSize))
    }

    const onPageChange = (page, details) => {
        console.log('onPageChange...', page, details)
        dispatch(setPage(page))
    }

    const onCellEditCommit = (params, event, details) => {
        //params {id: 273, field: 'name', value: '超神经HyperAI1111'}
        console.log('onCellEditCommit==', params, event, details)

        let {id, field, value} = params
        let updateData = {
            id
        }
        updateData[field] = value
        // console.log(updateData)
    }

    // 不起作用
    const onCellValueChange = (params, event, details) => {
        //params {id: 273, field: 'name', value: '超神经HyperAI1111'}
        console.log('onCellValueChange==', params, details)

        // let {id, field, value} = params
        // let updateData = {
        //     id
        // }
        // updateData[field] = value
        // console.log(updateData)
    }

    const onEditCellPropsChange = (params, event, details) => {
        //params {id: 273, field: 'name', value: '超神经HyperAI1111'}
        console.log('onEditCellPropsChange==', params, details)
        update = true
    }

    const  onError = (args, details) => {
        console.log('onError==', args, details)
    }

    const onSelectionModelChange = (selectionModel, details) => {
        console.log('onSelectionModelChange==', selectionModel, details)
    }


    
    console.log('table render==', )
    return (
        <div style={{ height: '100vh', width: '100%' }}>
            <DataGrid
                autoHeight
                rowCount={total}
                rows={aiSiteList}
                columns={columns}
                pageSize={pageSize}
                page={page}
                rowsPerPageOptions={[25, 50, 100]}
                paginationMode={'server'}
                onSelectionModelChange={onSelectionModelChange}
                onPageSizeChange={onPageSizeChange}
                onPageChange={onPageChange}

                onEditCellPropsChange={onEditCellPropsChange}
                onCellValueChange={onCellValueChange}
                onCellEditCommit={onCellEditCommit}
                // paginationModel={{page: 1, pageSize: 100}}
                // checkboxSelection
                // disableSelectionOnClick
            />
        </div>
    );
}
